<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import Editor from '@/components/Editor/index.vue'
import { Market, MarketStatus } from '@/enum/market'
import { FormInstance } from '@arco-design/web-vue'
const props = defineProps<{
  show: boolean
  id: number | string
  info?: any
  type: Market
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const formRef = ref() as Ref<FormInstance>
const detail = reactive({
  status: '',
  beginTime: '',
  endTime: '',
  title: '',
  type: props.type,
  sort: 0,
  config: {} as any,
  isCoupon: 0,
  remark: '',
})
/**n元n件 */
const nDefault = () => {
  return {
    spec: 0,
    money: 0,
  }
}
const maxDefault = () => {
  return {
    pattern: 1,
    fullHowMany: 0,
    subHowMany: 0,
    maxHowMany: 0,
    detailList: [
      {
        fullHowMany: 0,
        subHowMany: 0,
      },
    ],
  }
}
const test = ref(false)
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query = Object.assign({}, detail)
      query.config = JSON.stringify(detail.config)
      console.log('🚀 ~ file: Modal.vue:54 ~ formRef.value.validate ~ query:', query)
      const url = props.id ? '/server-shop/sys-seller/publicity/update' : '/server-shop/sys-seller/publicity/save'
      post(
        { url, data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          emit('update:show', false)
          emit('confirm')
          done(true)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const getInfo = () => {
  get({ url: '/server-shop/sys-seller/publicity/info', data: { id: props.id } }, ({ data }) => {
    Object.assign(detail, data)
    detail.config = JSON.parse(data.config)
    detail.beginTime = detail.beginTime.split(' ')[0]
    detail.endTime = detail.endTime.split(' ')[0]
    test.value = true
  })
}
const onSelect = data => {
  console.log('🚀 ~ file: Modal.vue:89 ~ onSelect ~ data:', data)
  if (data.length == 2) {
    detail.beginTime = data[0] + ' 00:00:00'
    detail.endTime = data[1] + ' 23:59:59'
  }
}
onMounted(() => {
  if (props.id) getInfo()
  if (props.type === Market.N元N件) detail.config = nDefault()
  else if (props.type === Market.满减活动) detail.config = maxDefault()
})
</script>
<template>
  <CDrawer v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="800px" :title="props.id ? '编辑' : '新建'" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 4 }" :wrapper-col-props="{ span: 20 }">
        <a-form-item label="活动名称" field="title" :rules="[{ required: true, message: '请输入活动名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.title" placeholder="请输入活动名称" />
        </a-form-item>
        <a-form-item label="排序" field="sort" :rules="[{ required: true, message: '请输入排序' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="0" v-model="detail.sort" placeholder="请输入排序" />
        </a-form-item>
        <a-form-item label="活动时间段" field="beginTime" :rules="[{ required: true, message: '请选择活动时间段' }]" :validate-trigger="['change', 'blur']">
          <a-range-picker v-if="!props.id || test" :default-value="[detail.beginTime, detail.endTime]" @change="onSelect" style="width: 100%" />
        </a-form-item>
        <a-form-item label="优惠券">
          <a-radio-group
            v-model="detail.isCoupon"
            :options="[
              { label: '启用', value: 1 },
              { label: '禁用', value: 0 },
            ]"
          />
        </a-form-item>
        <template v-if="props.type === Market.N元N件">
          <a-form-item label="n件" field="config.spec" :rules="[{ required: true, message: '请输入几件' }]" :validate-trigger="['change', 'blur']">
            <a-input-number :min="0" v-model="detail.config.spec" placeholder="请输入几件" />
          </a-form-item>
          <a-form-item label="n元" field="config.money" :rules="[{ required: true, message: '请输入几元' }]" :validate-trigger="['change', 'blur']">
            <a-input-number :min="0" v-model="detail.config.money" placeholder="请输入几元" />
          </a-form-item>
        </template>
        <template v-else-if="props.type === Market.满减活动">
          <a-form-item label="优惠方式" field="config.pattern" :rules="[{ required: true, message: '请选择优惠方式' }]" :validate-trigger="['change', 'blur']">
            <a-select
              v-model="detail.config.pattern"
              placeholder="请选择"
              :options="[
                { label: '阶梯优惠', value: 1 },
                { label: '循环优惠', value: 2 },
              ]"
            />
          </a-form-item>
          <template v-if="detail.config.pattern == 1">
            <a-form-item label="阶段优惠">
              <div>
                <a-list style="width: 100%" :scrollbar="false">
                  <a-list-item v-for="(item, index) in detail.config.detailList">
                    <div class="flex-center mr10">
                      <a-form-item style="margin-bottom: 0" label="满多少" :field="`config.detailList[${index}].fullHowMany`" :label-col-props="{ span: 10 }" :wrapper-col-props="{ span: 14 }" :rules="[{ required: true, message: '请选择优惠方式' }]" :validate-trigger="['change', 'blur']">
                        <a-input-number :min="0" v-model="item.fullHowMany" hide-button placeholder="请输入满多少" />
                      </a-form-item>
                      <a-form-item style="margin-bottom: 0" label="减多少" :field="`config.detailList[${index}].subHowMany`" :label-col-props="{ span: 10 }" :wrapper-col-props="{ span: 14 }" :rules="[{ required: true, message: '请选择优惠方式' }]" :validate-trigger="['change', 'blur']">
                        <a-input-number :min="0" v-model="item.subHowMany" hide-button placeholder="请输入满多少" />
                      </a-form-item>
                    </div>
                    <template #actions>
                      <icon-delete @click="detail.config.detailList.splice(index, 1)" />
                    </template>
                  </a-list-item>
                </a-list>
                <div style="height: 10px"></div>
                <a-button
                  type="primary"
                  long
                  @click="
                    detail.config.detailList.push({
                      fullHowMany: 0,
                      subHowMany: 0,
                    })
                  "
                  >添加</a-button
                >
              </div>
            </a-form-item>
          </template>
          <template v-if="detail.config.pattern == 2">
            <a-form-item label="满多少" field="config.fullHowMany" :rules="[{ required: true, message: '请选择优惠方式' }]" :validate-trigger="['change', 'blur']">
              <a-input-number :min="0" v-model="detail.config.fullHowMany" hide-button placeholder="请输入满多少" />
            </a-form-item>
            <a-form-item label="减多少" field="config.subHowMany" :rules="[{ required: true, message: '请选择优惠方式' }]" :validate-trigger="['change', 'blur']">
              <a-input-number :min="0" v-model="detail.config.subHowMany" hide-button placeholder="请输入减多少" />
            </a-form-item>
            <a-form-item label="最多减多少" field="config.maxHowMany" :rules="[{ required: true, message: '请选择优惠方式' }]" :validate-trigger="['change', 'blur']">
              <a-input-number :min="0" v-model="detail.config.maxHowMany" hide-button placeholder="请输入最多减多少" />
            </a-form-item>
          </template>
        </template>
        <a-form-item label="活动规则" field="remark" :rules="[{ required: true, message: '请输入活动规则' }]" :validate-trigger="['change', 'blur']">
          <Editor v-model:content="detail.remark" />
        </a-form-item>
      </a-form>
    </div>
  </CDrawer>
</template>
<style lang="less" scoped>
.content {
  :deep(.arco-form-item-content.arco-form-item-content-flex) {
    display: block;
  }
}
</style>
